<template>
  <div class="goods">
    <!-- item list -->
    <div class="goods-left">
      <ul>
        <li v-for="item in goodsList" :key="item.name">{{ item.name }}</li>
      </ul>
    </div>

    <!-- goods list -->
    <div class="goods-list">
      <ul>
        <li v-for="item in goodsList" :key="item.name">
          <h3>{{ item.name }}</h3>
          <ul class="list-item">
            <li v-for="sub in item.foods" :key="sub.id">
              <img :src="sub.imgUrl" alt="" />
              <div>
                <h4>{{ sub.name }}</h4>
                <p>{{ sub.category }}</p>
                <p>月售{{ sub.sellCount }}份</p>
                <div>
                  <span><small>￥</small>{{ sub.price }}</span>
                  <del><small>￥</small>{{ sub.price + 10 }}</del>
                </div>
              </div>
            </li>
            <li>
              <img src="../../assets/imgs/bg.jpg" alt="" />
              <div>
                <h4>飒飒撒地方师傅</h4>
                <p>咸粥</p>
                <p>月售1100份</p>
                <div>
                  <span><small>￥</small>24</span>
                  <del><small>￥</small>24</del>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { goodsLists } from '../../api/goods.js'
export default {
  created() {
    this.goodlist()
  },
  data() {
    return {
      goodsList: []
    }
  },
  methods: {
    async goodlist() {
      const { goodsList } = await goodsLists()
      this.goodsList = goodsList
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  height: 100%;
  display: flex;

  .goods-left {
    flex: 0 0 100px;
    background-color: #f4f5f7;
    // 让当前盒子内超出的部分实现滚动
    overflow-y: scroll;
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      li {
        color: #333;
        padding: 15px;
        &.active {
          background-color: #fff;
          font-weight: 700;
        }
      }
    }
  }

  .goods-list {
    flex: 1;
    // 让当前盒子内超出的部分实现滚动
    overflow-y: scroll;
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }

    img {
      width: 75px;
      height: 75px;
      margin-right: 10px;
    }

    h3 {
      border-left: 2px solid #ccc;
      background-color: #f4f5f7;
      line-height: 24px;
      color: #9c9fa6;
      text-indent: 1em;
      font-size: 14px;
    }

    .list-item {
      padding: 0 20px;
      li {
        background-color: #fff;
        padding: 20px 0;
        display: flex;
        border-bottom: 1px solid #ccc;

        &:nth-last-of-type(1) {
          border: none;
        }
        h4 {
          font-weight: 700;
          color: #333;
        }
        p {
          font-size: 14px;
          color: #999;
          margin: 5px 0 6px;
        }

        span {
          color: #f20;
          font-weight: 700;
        }
        del {
          color: #ccc;
          font-weight: 700;
          margin-left: 10px;
        }
        small {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
